<script lang="ts">
	import { page } from '$app/state';
	import { USER_ROLE, UserInfo } from '$lib/api/proto/user_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { EllipsisVertical } from 'lucide-svelte';
	import EditUserInfoModal from './EditUserInfoModal.svelte';
	import type { RoadmapInfo } from '$lib/api/proto/roadmap_api';
	import { goto } from '$app/navigation';

	interface Props {
		userId: string;
	}
	let props: Props = $props();

	let showEditModal = $state(false);

	let userInfo = $state(null as UserInfo | null);

	let roadmapList = $state([] as RoadmapInfo[]);

	async function togglePublicAccess(checked: boolean) {
		if (userStore.userSession == null || userStore.userInfo?.basicInfo == undefined) {
			return;
		}
		await callApi(
			appStore.userApiClient.updateBasic({
				sessionId: userStore.userSession,
				basicInfo: {
					...userStore.userInfo.basicInfo,
					publicAccess: checked
				}
			}).response
		);
		userStore.userInfo = {
			...userStore.userInfo,
			basicInfo: {
				...userStore.userInfo.basicInfo,
				publicAccess: checked
			}
		};
	}

	async function loadUserInfo() {
		const res = await callApi(
			appStore.userApiClient.getPubInfo({
				userId: props.userId
			}).response
		);
		userInfo = res.userInfo ?? null;
	}

	async function loadRoadmapList() {
		const res = await callApi(
			appStore.roadmapApiClient.listForApply({
				userId: props.userId
			}).response
		);
		roadmapList = res.roadmapList;
	}

	$effect(() => {
		if (userStore.userSession == null || userStore.userInfo?.userId != props.userId) {
			loadUserInfo();
		}
	});

	$effect(() => {
		loadRoadmapList();
	});
</script>

{#if userStore.userInfo?.userId == props.userId}
	<div class="absolute right-[20px] -top-[50px] flex gap-2 items-center">
		{#if userStore.userInfo.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH}
			{#if userStore.userInfo.basicInfo.publicAccess == true}
				<button
					type="button"
					class="btn btn-accent btn-sm"
					onclick={() => {
						navigator.clipboard.writeText(page.url.toString()).then(() => {
							appStore.addToastMessage({
								level: 'info',
								content: '复制成功',
								keepTime: 2000
							});
						});
					}}>分享</button
				>
			{/if}
			公开访问
			<input
				type="checkbox"
				checked={userStore.userInfo.basicInfo.publicAccess ?? false}
				class="toggle toggle-sm toggle-secondary"
				onclick={(e) => togglePublicAccess(e.currentTarget.checked)}
			/>
		{/if}
		<div class="dropdown dropdown-end">
			<div tabindex="0" role="button" class="btn btn-ghost">
				<EllipsisVertical size={16} />
			</div>
			<ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-[160px] p-2 shadow-sm gap-2">
				<li>
					<button type="button" class="btn btn-ghost" onclick={() => (showEditModal = true)}
						>编辑</button
					>
				</li>
			</ul>
		</div>
	</div>
{/if}

<div class="h-[calc(100vh-110px)] overflow-y-auto">
	<h2 class="text-xl font-bold">用户信息</h2>
	<div class="overflow-x-auto">
		<table class="table">
			<tbody>
				{#if userStore.userInfo?.userId == props.userId}
					<tr>
						<td class="w-[100px] text-right"> 用户角色 </td>
						<td
							>{#if userStore.userInfo.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH}
								教练
							{:else if userStore.userInfo.basicInfo?.userRole == USER_ROLE.USER_ROLE_STUDENT}
								学生
							{/if}
						</td>
					</tr>
					<tr>
						<td class="w-[100px] text-right"> 用户简介 </td>
						<td>
							<SimpleEditor sizeClass="" readOnly data={userStore.userInfo.basicInfo?.userIntro} />
						</td>
					</tr>
				{:else if userInfo != null}
					<tr>
						<td class="w-[100px] text-right"> 用户角色 </td>
						<td>
							{#if userInfo.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH}
								教练
							{:else if userInfo.basicInfo?.userRole == USER_ROLE.USER_ROLE_STUDENT}
								学生
							{/if}
						</td>
					</tr>
					<tr>
						<td class="w-[100px] text-right"> 用户简介 </td>
						<td>
							<SimpleEditor sizeClass="" readOnly data={userInfo.basicInfo?.userIntro} />
						</td>
					</tr>
				{/if}
			</tbody>
		</table>
	</div>

	{#if roadmapList.length > 0}
		<h2 class="text-xl font-bold">公开访问路线图</h2>
		<div class="flex flex-wrap gap-2 p-2">
			{#each roadmapList as roadmap}
				<div class="card bg-base-300 w-[300px] h-[220px] shadow-sm">
					<div class="card-body">
						<div class="flex w-[260px] justify-between items-center">
							<h2
								class="card-title text-secondary max-w-[200px] overflow-hidden truncate"
								title={roadmap.basicInfo?.name}
							>
								{roadmap.basicInfo?.name}
							</h2>
						</div>

						<SimpleEditor data={roadmap.basicInfo?.desc} sizeClass="h-[80px]" readOnly />
						<div class="card-actions justify-end">
							<button
								class="btn btn-secondary"
								onclick={() => {
									goto(`/app/roadmap/map?roadmapId=${roadmap.roadmapId}`);
								}}>打开</button
							>
						</div>
					</div>
				</div>
			{/each}
		</div>
	{/if}
</div>

<div class="absolute -left-[10000px]">
	{#if showEditModal}
		<EditUserInfoModal onClose={() => (showEditModal = false)} />
	{/if}
</div>
